<template>
  <view class="container">
    <pap-navbar title="查看详情" back bgColor="white" />
    <view class="grow min-h-0 flex flex-col">
      <view class="flex align-center title">
        <view>XX墩柱C30的浇筑令任务</view>
        <view :class="['status', ['warn', 'sucees'][0]]">{{
          ['未开始', '进行中', '已完成'][0]
        }}</view>
      </view>

      <view class="description">
        <view
          class="description-item"
          v-for="(item, index) in descData"
          :key="index"
        >
          <view class="description-item-label">{{ item.label }}</view>
          <view class="description-item-value">{{ item.value }}</view>
        </view>
      </view>

      <view class="grow min-h-0 flex flex-col card-box">
        <!-- <u-tabs
          :current="currentTabIndex"
          :list="tabs"
          @click="clickTab"
        ></u-tabs> -->
        <pap-tab :list="tabs" />

        <scroll-view scroll-y="true" class="grow min-h-0">
          <template v-if="currentTabIndex === 0">
            <view class="flex flex-col info">
              <view>区域：伴着站 </view>
              <view>施工配合比：施工配合比001 </view>
              <view>施工部位：施工配合比001 </view>
              <view>强度等级：C30 </view>
              <view>设计方量：40 </view>
            </view>
          </template>
          <template v-else-if="currentTabIndex === 1">
            <view class="TimUi-list">
              <view
                class="flex-col TimUi-list-item"
                v-for="item in poureList"
                :key="item.no"
                @click.stop="pageJump(item, 'perview')"
              >
                <view class="flex TimUi-list-item-text">
                  {{ item.no }}
                </view>
                <view class="flex TimUi-list-item-text">
                  <view>设备名称：{{ item.area }} </view>
                </view>
                <view class="flex TimUi-list-item-text">
                  <view>运输车次：{{ item.strength }} </view>
                  <view>生产盘数：{{ item.volume }} </view>
                </view>
                <view :class="['status', ['warn', 'sucees'][item.status]]"
                  >{{ ['未开始', '进行中', '已完成'][item.status] }}
                </view>
                <view class="flex TimUi-list-item-text">
                  <view>累计生产方量：{{ item.date }} </view>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view style="padding: 0 60rpx">
              <pap-steps
                :current="1"
                :list="acceptanceList"
                :options="stepsOption"
              />
            </view>
          </template>
        </scroll-view>
      </view>
    </view>
    <view class="opreation-group">
      <button class="TimUi-btn block bgc-52D9">开始任务</button>
      <button class="TimUi-btn block bgc-D54941">取消任务</button>
    </view>
  </view>
</template>

<script>
import dayjs from '@/utils/dayjs'
import papSteps from './components/pap-steps/pap-steps.vue'
import papTab from './components/pap-tab/pap-tab.vue'
export default {
  components: {
    papTab,
    papSteps
  },
  data() {
    return {
      descData: [
        {
          label: '编号',
          key: 'no',
          value: '202406010010'
        },
        {
          label: '负责人',
          key: '',
          value: '倪婷'
        },
        {
          label: '关注人',
          key: '',
          value: '倪婷、雷志祥'
        },
        {
          label: '计划时间',
          key: '',
          value: '2024-06-01'
        },
        {
          label: '优先级',
          key: '',
          value: '中'
        },
        {
          label: '备注',
          key: '',
          value: '-'
        },
        {
          label: '附件',
          key: '',
          value: '-'
        }
      ],
      currentTabIndex: 0,
      tabs: [
        {
          name: '业务信息'
        },
        {
          name: '生产情况'
        },
        {
          name: '验收记录'
        }
      ],
      poureList: [],
      stepsOption: {
        label: 'date',
        desc: 'status'
      },
      acceptanceList: [
        {
          no: '202406010010',
          date: dayjs().format('YYYY-MM-DD'),
          status: Math.floor(Math.random() * 2),
          acceptor: '张工',
          transport: '10',
          remark: '在哪上滴那边海的那边'
        },
        {
          no: '202406010010',
          date: dayjs().format('YYYY-MM-DD'),
          status: Math.floor(Math.random() * 2),
          acceptor: '张工',
          transport: '10',
          remark: '无'
        }
      ]
    }
  },
  mounted() {
    for (let i = 0; i < 10; i++) {
      const tmp = {
        no: new Date().getTime() + i,
        area: `${i + 1}标拌合站`,
        location: '墩柱',
        strength: 'C30',
        volume: '30',
        date: dayjs().format('YYYY-MM-DD'),
        status: Math.floor(Math.random() * 3)
      }
      this.poureList.push(tmp)
    }
  },
  methods: {
    clickTab(item) {
      console.log(item)
      this.currentTabIndex = item.index
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 80rpx;
  padding: 0 48rpx;
  background-color: white;

  .status {
    padding: 8rpx 20rpx;
    font-size: 24rpx;
    color: rgba(52, 56, 63, 1);
    background: rgba(201, 205, 212, 1);
    border-radius: 6rpx;

    &.sucees {
      color: rgba(0, 136, 88, 1);
      background: rgba(198, 243, 215, 1);
    }

    &.warn {
      color: rgba(227, 115, 24, 1);
      background: rgba(255, 217, 194, 1);
    }
  }
}

.description {
  background-color: white;
  .description-item {
    display: flex;
    align-items: center;
    height: 96rpx;
    padding: 0 48rpx;
    font-size: 32rpx;
    color: #34383f;

    &::after {
      content: '';
      position: absolute;
      left: 48rpx;
      right: 48rpx;
      bottom: 0;
      height: 2rpx;
      background-color: #e7e7e7;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    .description-item-label {
      min-width: 224rpx;
    }
  }
}

.card-box {
  overflow: hidden;
  margin: 24rpx 32rpx 32rpx;
  border-radius: 24rpx;
  background-color: white;

  .info {
    padding: 0 48rpx;
    font-size: 28rpx;
    color: #4e5969;
    view {
      margin: 22rpx 0;
    }
  }

  .TimUi-list {
    .TimUi-list-item {
      align-items: self-start;
      margin: 0 32rpx 32rpx;
      padding: 32rpx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0rpx 12rpx 60rpx 10rpx rgba(0, 0, 0, 0.05);
      border-radius: 12rpx;

      .TimUi-list-item-text {
        width: 100%;
        justify-content: space-between;
        font-size: 28rpx;
        color: rgba(78, 89, 105, 1);

        view {
          flex: 0 0 50%;
          line-height: 44rpx;
          margin: 0 0 20rpx;
        }

        &:first-child {
          margin: 0 0 24rpx;
          font-size: 32rpx;
          color: rgba(52, 56, 63, 1);
        }

        &:last-child {
          view {
            flex: 0 0 100%;
            margin: 0;
          }
        }
      }

      .status {
        position: absolute;
        top: 0;
        right: 0;
        padding: 8rpx 20rpx;
        font-size: 24rpx;
        color: rgba(52, 56, 63, 1);
        background: rgba(201, 205, 212, 1);
        border-radius: 0rpx 12rpx 0 12rpx;

        &.sucees {
          color: rgba(0, 136, 88, 1);
          background: rgba(198, 243, 215, 1);
        }

        &.warn {
          color: rgba(227, 115, 24, 1);
          background: rgba(255, 217, 194, 1);
        }
      }
    }
  }
}

.opreation-group {
  padding-top: 0;
}
</style>
